<template>
  <div class="recommend-container">
    <el-tabs v-model="activeTab" class="recommend-tabs">
      <el-tab-pane label="热门歌曲榜" name="songs">
        <el-table
          :data="songList"
          stripe
          style="width: 100%"
          v-loading="songsLoading"
        >
          <el-table-column label="排名" width="80" align="center">
            <template #default="{ $index }">
              <div
                class="rank-number"
                :class="{
                  top1: $index === 0,
                  top2: $index === 1,
                  top3: $index === 2,
                }"
              >
                {{ $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="歌曲封面" width="100" align="center">
            <template #default="{ row }">
              <el-image
                :src="row.coverUrl || '/images/default-song-cover.jpg'"
                fit="cover"
                class="cover-image"
              >
                <template #error>
                  <div class="image-error">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="歌曲信息" min-width="200">
            <template #default="{ row }">
              <div class="song-info">
                <div class="song-name">
                  <span
                    @click.prevent="goToSongDetail(row.songId)"
                    style="cursor: pointer"
                  >
                    {{ row.songName }}
                  </span>
                </div>
                <div class="song-artist">
                  <span
                    @click.prevent="goToArtistDetail(row.artist.artistId)"
                    style="cursor: pointer"
                  >
                    {{ row.artist.artistName }}
                  </span>
                  <span v-if="row.isVip" class="vip-tag">VIP</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="专辑" width="180">
            <template #default="{ row }">
              <div class="album-info">
                {{ row.album.albumName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="风格" width="100" align="center">
            <template #default="{ row }">
              <el-tag size="small">{{ row.genre }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="播放量" width="120" align="center">
            <template #default="{ row }">
              <div class="play-count">
                <i class="el-icon-headset"></i>
                {{ row.playCount }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="时长" width="100" align="center">
            <template #default="{ row }">
              <span>{{ row.duration }}</span>
            </template>
          </el-table-column>
          <el-table-column label="播放" width="60" align="center">
            <template #default="{ row }">
              <el-icon style="cursor: pointer"><VideoPlay /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="热门专辑榜" name="albums">
        <el-table
          :data="albumList"
          stripe
          style="width: 100%"
          v-loading="albumsLoading"
        >
          <el-table-column label="排名" width="80" align="center">
            <template #default="{ $index }">
              <div
                class="rank-number"
                :class="{
                  top1: $index === 0,
                  top2: $index === 1,
                  top3: $index === 2,
                }"
              >
                {{ $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="专辑封面" width="120" align="center">
            <template #default="{ row }">
              <el-image :src="row.coverUrl" fit="cover" class="album-cover">
                <template #error>
                  <div class="image-error">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="专辑信息" min-width="220">
            <template #default="{ row }">
              <div
                class="album-info"
                @click.prevent="goToAlbumDetail(row.albumId)"
                style="cursor: pointer"
              >
                <div class="album-name">
                  {{
                    row.albumName || (row.album && row.album.albumName) || "--"
                  }}
                </div>
                <div class="album-artist">
                  {{
                    row.artistName ||
                    (row.artist && row.artist.artistName) ||
                    "未知艺术家"
                  }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发行日期" width="120" align="center">
            <template #default="{ row }">
              {{ row.releaseDate }}
            </template>
          </el-table-column>
          <el-table-column label="曲目数" width="100" align="center">
            <template #default="{ row }"> {{ row.trackCount }} 首 </template>
          </el-table-column>
          <el-table-column label="风格" width="100" align="center">
            <template #default="{ row }">
              <el-tag size="small">{{ row.genre }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="播放量" width="120" align="center">
            <template #default="{ row }">
              <div class="play-count">
                {{ row.releaseDate }}
                {{ row.playCount }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { VideoPlay } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import api from "../services/api";

export default {
  name: "Recommend",
  setup() {
    const activeTab = ref("songs");
    const songList = ref([]);
    const albumList = ref([]);
    const songsLoading = ref(true);
    const albumsLoading = ref(true);
    const router = useRouter();

    // 跳转到歌曲详情
    const goToSongDetail = (songId) => {
      router.push({ name: "SongDetail", params: { id: songId } });
    };

    // 跳转到歌手详情，并带上 from 参数
    const goToArtistDetail = (artistId) => {
      router.push({
        name: "SingerDetail",
        params: { id: artistId },
        query: { from: router.currentRoute.value.fullPath },
      });
    };

    // 跳转到专辑详情
    const goToAlbumDetail = (albumId) => {
      router.push({ name: "AlbumDetails", params: { albumId } });
    };

    // 获取热门歌曲
    const fetchHotSongs = async () => {
      try {
        songsLoading.value = true;
        const response = await api.musicApi.getHotSongs({
          limit: 10,
        });
        if (response.code === 200) {
          console.log("热门歌曲数据成功:", response.data);
          songList.value = response.data.map((song) => ({
            songId: song.songId,
            songName: song.songName,
            artist: {
              artistId: song.artistId,
              artistName: song.artistName || "未知艺术家",
            },
            album: {
              albumId: song.albumId,
              albumName: song.albumName,
            },
            duration: `${Math.floor(song.duration / 60)}:${String(
              song.duration % 60
            ).padStart(2, "0")}`,
            coverUrl: song.coverUrl,
            genre: song.genre,
            playCount: song.playCount,
            isVip: song.isVip,
          }));
        }
      } catch (error) {
        console.error("获取热门歌曲失败:", error);
      } finally {
        songsLoading.value = false;
      }
    };

    // 获取热门专辑
    const fetchHotAlbums = async () => {
      try {
        albumsLoading.value = true;
        const response = await api.albumApi.getHotAlbums({
          limit: 10,
        });
        if (response.code === 200) {
          console.log("获取热门专辑数据成功:", response.data);
          albumList.value = response.data || [];
        }
      } catch (error) {
        console.error("获取热门专辑失败:", error);
      } finally {
        albumsLoading.value = false;
      }
    };

    onMounted(() => {
      fetchHotSongs();
      fetchHotAlbums();
    });

    return {
      activeTab,
      songList,
      albumList,
      songsLoading,
      albumsLoading,
      goToSongDetail,
      goToArtistDetail,
      goToAlbumDetail,
    };
  },
};
</script>

<style scoped>
.recommend-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.recommend-tabs {
  margin-top: 10px;
}

.rank-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f5f7fa;
  font-weight: bold;
  margin: 0 auto;
}

.top1 {
  background-color: #f56c6c;
  color: white;
}

.top2 {
  background-color: #e6a23c;
  color: white;
}

.top3 {
  background-color: #67c23a;
  color: white;
}

.cover-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.album-cover {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #c0c4cc;
  font-size: 24px;
}

.song-info,
.album-info {
  display: flex;
  flex-direction: column;
}

.song-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.album-name {
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 16px;
}

.song-artist,
.album-artist {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
}

.vip-tag {
  margin-left: 8px;
  background-color: #fef2f2;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  font-size: 10px;
  line-height: 16px;
}

.play-count {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-icon-headset {
  margin-right: 5px;
  color: #909399;
}
</style>
